<template>
  <div class="content">
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="$router.back(-1)" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="title">{{catName}}</div>
      </div>
    </div>

    <van-row class="page-block">
      <van-list class="list-cell no-border">
        <div v-for="item in list">
          <router-link :to="{name:'msgDetail',query:{id:item.article_id}}" class="media-msg-list">
            <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(item.thumb)">
              <template v-slot:loading>
                <van-loading type="spinner" size="20"/>
              </template>
            </van-image>

            <div class="media-list-body pull-left">
              <div class="media-list-text-top">{{item.title}}</div>
              <div class="media-list-text-tps">
                <span class="pull-left">发布者：{{item.author}}</span>
                <span class="pull-right">{{stampToDate(item.publish_time)}}</span>
              </div>
              <ul class="pull-right msg-num">
                <li class="item good">{{item.good_numb||0}}</li>
                <li class="item star">{{item.collectCount||0}}</li>
                <li class="item book">{{item.msgCount||0}}</li>
              </ul>
            </div>
          </router-link>
        </div>
      </van-list>

      <infinite-loading :on-infinite="onLoad" ref="infiniteLoading">
        <div slot="no-results" class="no-more">没有更多了～</div>
        <div slot="no-more" class="no-more">没有更多了～</div>
      </infinite-loading>

    </van-row>

  </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';

  export default {
    name: "detail",
    components: {
        InfiniteLoading
    },
    data() {
      return {
          id: this.$route.query.cat,
          keyword: this.$route.query.keyword||'',

          page:1,
          catName:'',

        list: [],
        loading: false,
        finished: false,
      }
    },
    computed: {},
    mounted: function () {

    },
    methods: {
      onLoad($state) {
          this.$api.msg.lists(this.id,this.page,0,this.keyword).then(res=>{
              var res=res.data;
              this.catName=res.data.cat_name;

              if(this.keyword!='') this.catName='搜索';

              if(res.data.list.data.length>0){
                  this.list=res.data.list.data;
                  this.page++;
                  // 加载状态结束
                  $state.loaded();
              } else {
                  $state.complete();
              }

              this.info=res.data;
          });
      },


    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/index.scss";
</style>
